<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
const charts = ref(null);
onMounted(() => {
    if (charts.value) {
        const myChart = echarts.init(charts.value);
        const option = {
            title: {
                text: '拥有产品以及增值服务数量'
            },
            tooltip: {},
            legend: {
                data: ['产品数量']
            },
            xAxis: {
                data: ['消息通知', '定时更新', 'ECS服务', '对象存储', 'CDN加速', '公网IP']
            },
            yAxis: {},
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        myChart.setOption(option);
    }
});
</script>

<template>
    <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
